<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>laypage Demo</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
        <script src="layui.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="laypage"></div>
        <br>
        <br>
        <hr>
        <br>
        <br>
        <ul id="city_list"></ul>
        <script>
            layui.use(['laypage', 'layer'], function () {
                let laypage = layui.laypage;
                let data = [
                    '北京',
                    '上海',
                    '广州',
                    '深圳',
                    '杭州',
                    '长沙',
                    '合肥',
                    '宁夏',
                    '成都',
                    '西安',
                    '南昌',
                    '上饶',
                    '沈阳',
                    '济南',
                    '厦门',
                    '福州',
                    '九江',
                    '宜春',
                    '赣州',
                    '宁波',
                    '绍兴',
                    '无锡',
                    '苏州',
                    '徐州',
                    '东莞',
                    '佛山',
                    '中山',
                    '成都',
                    '武汉',
                    '青岛',
                    '天津',
                    '重庆',
                    '南京',
                    '九江',
                    '香港',
                    '澳门',
                    '台北'
                ];
                //调用分页
                laypage.render({
                    elem: 'laypage', // 存放分页控件的容器
                    count: data.length, //数据总数。一般通过服务端得到
                    limit: 5,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    limits: [5, 10, 20, 50],//每页条数的选择项
                    layout: ['prev', 'page', 'next', 'limit', 'limits'],
                    theme: '#F457F2', //自定义主题
                    jump: function (obj) {//模拟渲染
                        document.getElementById('city_list').innerHTML = function () {
                            let arr = [];
                            let thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<li>' + item + '</li>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        </script>
    </body>
</html>